<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>全选: <input type="checkbox" name="" id="" class="check-all"></p>
    <p>单选: <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
        <input type="checkbox" name="" id="" class="check-one">
    </p>
</body>
<script>
    // 全选功能:
    // 单击全选 所有的单选 跟随全选的状态

    // 反选功能:
    // 每次点击单选 => 判断所有的单选(商品)是否全部被选中, 如果全部选中 => 全选(反选)  否则 => 全选(取消反选)


    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");


    // 全选: 
    // 单击全选 所有的单选 跟随全选的状态
    checkAll.onclick = function () {
        var status = this.checked;
        console.log(status);

        for (var i = 0; i < checkOneList.length; i++) {
            var checkOne = checkOneList[i];
            checkOne.checked = status;
        }
    }


    // 反选功能:
    // 每次点击单选 => 判断所有的单选(商品)是否全部被选中, 如果全部选中 => 全选(反选)  否则 => 全选(取消反选)

    for (let i = 0; i < checkOneList.length; i++) {
        let checkOne = checkOneList[i];
        checkOne.onclick = function () {
            // 判断所有的单选(商品)是否全部被选中  ?

            // 计数法   => 每次点击 遍历所有的单选 => 统计选中的元素的个数
            // var count = 0;
            // for (var j = 0; j < checkOneList.length; j++) {
            //     var item = checkOneList[j];
            //     if (item.checked) { // item.checked = true
            //         count++;
            //     }
            // }
            // // if (count == checkOneList.length) {
            // //     checkAll.checked = true;
            // // } else {
            // //     checkAll.checked = false;
            // // }

            // checkAll.checked = count == checkOneList.length ? true : false;

            // 假设法
            /* var flag = true;  // 假设全都选中
            for (var j = 0; j < checkOneList.length; j++) {
                var item = checkOneList[j];

                // !item.checked == true  => item.checked === false
                if (!item.checked) {//存在未选中的
                    flag = false;
                }
            }
            checkAll.checked = flag; */


            // every()   

            var flag = Array.from(checkOneList).every(function (item) {
                return item.checked;
            })
            checkAll.checked = flag;

        }
    }






</script>

</html>